<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识Vue</title>
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    初识Vue：
      1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
      2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
      3. root容器里的代码被称为[Vue模板]；(需要vue实例解析)
      4. Vue实例和容器是一一对应的；
      5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
      6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
      7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

      注意区分：js表达式和js代码(语句)
        1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方；
          (1). a
          (2). a+b
          (3). demo(1)
          (4). x === y ? 'a':'b'
        2. js代码(语句)
          (1). if(){}
          (2). for(){}
        js表达式是特殊的js代码
        
      <Root> 根
   -->
   <!-- 
     data与el的两种写法
      1. el有两种写法
        (1).new Vue的时候配置el属性
        (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
      2. data有两种写法
        (1).对象式
        (2).函数式
        如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
      3. 一个重要原则：
        由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
    -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>{{ message.toUpperCase() }} {{ Date.now() }}</h1>
  </div>
  <script>
    // shift + 刷新 强制刷新...页签图标，第二次刷新就忽略了
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

    // 创建Vue实例
    const vm = new Vue({
      // el: '#root', // el第一种写法 el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。也可以这么写：document.getElementById("root")
      // data: { // 第一种写法：对象式  data中用于存储数据，数据供el所指定的容器去使用。
      //   message: "hello world!"
      // }
      data() { // 第二种写法：函数式 组件必须写函数式
        // 此处的this是Vue实例对象(不能写箭头函数)
        console.dir(this);
        return {
          message: "hello world!"
        }
      } 
    });
    // setTimeout(() => {
      // Vue的原型对象
      vm.$mount("#root") // el第二种写法：mount挂载 更灵活
    // }, 1000)

  </script>
</body>
</html>